<template>
  <div
    :key="uuid"
    :ref="uuid"
    class="card"
    :style="propStyle"
    :class="{ fullscreen: fullscreenFlag }"
  >
    <div v-if="showFullscreen" class="fullscreenWrap" :style="fullscreenStyle">
      <img v-if="!fullscreenFlag" :src="fullscreenIcon" alt="" @click="fullscreenFlag = true" />
      <img v-else :src="quitfullscreenIcon" alt="" @click="fullscreenFlag = false" />
    </div>
    <slot />
  </div>
</template>

<script setup>
import fullscreenIcon from '@/assets/image/fullscreen.png';
import quitfullscreenIcon from '@/assets/image/quitfullscreen.png';

const uuid = ref('');
const fullscreenFlag = ref(false);

uuid.value = createUuid();

function createUuid() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}
const { propStyle, fullscreenStyle, showFullscreen, ...props } = defineProps({
  propStyle: Object,
  fullscreenStyle: Object,
  showFullscreen: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="scss" scoped>
.card {
  border-radius: 8px;
  border: 1px solid #ebeef5;
  background: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  position: relative;
  box-sizing: border-box;

  padding: 8px 12px;
}
.fullscreen {
  position: fixed;
  width: calc(100vw - 30px);
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 233;
}

.fullscreenWrap {
  position: absolute;
  right: 15px;
  top: 10px;
  cursor: pointer;
  width: 24px;
  height: 24px;
}
</style>
